<template>
  <div class="roles divBox">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header>
        <el-row>
          <el-col :span="24">
            <el-form ref="refAgent" size="small" :model="modelAgent" :rules="rulesAgent" :label-position="labelPositionAgent" label-width="72px">
              <el-col v-bind="grid">
                <el-form-item label="角色搜索：">
                  <el-input v-model="modelAgent.keyword" class="search-select" placeholder="请输入搜索关键字" clearable>
                    <el-button slot="append" icon="el-icon-search" @click="searchFullNameClick" />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-button size="small" icon="el-icon-plus" type="primary" @click="addAgentRoles">添加角色</el-button>
            <el-button size="small" icon="el-icon-close" type="primary" :disabled="disabled" @click="batchDelAgent">批量删除角色</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table
        ref="agentTableRef"
        v-loading="rolesTableLoading"
        :data="rolesData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          min-width="55"
        />
        <el-table-column
          prop="id"
          label="ID"
          sortable
          align="center"
          min-width="60"
        />
        <el-table-column
          prop="name"
          label="角色"
          align="center"
          min-width="170"
        />
        <el-table-column
          label="上级代理"
          min-width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.levelName | filterEmpty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ $moment.utc(scope.row.createDateUTC).tz($moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
<!--            <el-button type="text" size="small" @click="editRoles(scope.row)">编辑</el-button>-->
            <el-button type="text" size="small" @click="delRoles(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pagination.total > 0"
        :total="pagination.total"
        :page.sync="pagination.currentPage"
        :limit.sync="pagination.limit"
        :page-sizes="[10, 20, 30, 50]"
        @pagination="pageChange"
      />
    </el-card>
  </div>
</template>

<script>
import {
  getRolesListApi,
  DELETBatchAgentRolesApi
} from '@/api/agent';

export default {
  name: 'Roles',
  data() {
    return {
      grid: {
        xl: 5,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24
      },
      modelAgent: {
        keyword: ''
      },
      rulesAgent: {},
      rolesTableLoading: false,
      rolesData: [],
      labelPositionAgent: 'right',
      // 分页
      pagination: {
        total: 0,
        currentPage: 1,
        limit: 10
      },
      del: [],
      disabled: true
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 列表选择改变时触发
    handleSelectionChange(val) {
      this.$set(this, 'del', val.map((item) => item.id))
      this.del.length !== 0 ? this.disabled = false : this.disabled = true
    },
    // 删除代理商角色
    batchDelAgent() {
      this.delRole()
    },
    // 添加代理商角色
    addAgentRoles() {
      const that = this
      this.$modal({
        componentProps: {},
        component: (resolve) => require(['./components/addRoles'], resolve),
        props: {
          title: '添加',
          customClass: 'zdyDialogCls AgentRoles',
          closeOnClickModal: false,
          closeOnPressEscape: false
        },
        methods: {
          // 新增
          addAgentRolesModal() {
            that.pagination.currentPage = 1
            that.getRolesList()
          }
        }
      })
    },
    // 编辑代理商角色
    editRoles(row) {
      const that = this
      this.$modal({
        componentProps: {
          editAgentRolesInfo: row,
          isCreateRolesDialog: 1
        },
        component: (resolve) => require(['./components/addRoles'], resolve),
        props: {
          title: '编辑',
          customClass: 'zdyDialogCls AgentRoles',
          closeOnClickModal: false,
          closeOnPressEscape: false
        },
        methods: {
          // 新增
          addAgentRolesModal() {
            that.pagination.currentPage = 1
            that.getRolesList()
          }
        }
      })
    },
    delRoles(id) {
      this.delRole(id)
    },
    delRole(id) {
      id || (this.del.length !== 0 && !this.disabled) ? this.$confirm(`删除代理商`, {
        title: `删除代理商角色`,
        message: this.$createElement('div', null, ['确定要删除代理商角色吗？', '删除代理商角色后将无法恢复，请谨慎操作！'].map((item) => this.$createElement('p', null, item))),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DELETBatchAgentRolesApi(!id ? `(${this.del.join()})` : id).then(() => {
          this.$message.success('删除代理商角色成功！')
          this.pagination.currentPage = 1
          this.getRolesList()
        }).catch(() => {
          this.$message.error('删除代理商角色失败！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消删除代理商角色`
        })
      }) : this.$message.warning('请至少选择一条数据')
    },
    pageChange(data) {
      this.pagination.currentPage = data.page
      this.getRolesList()
    },
    // 获取代理商角色
    getRolesList() {
      this.$set(this, 'rolesTableLoading', true)
      getRolesListApi({
        PageNumber: this.pagination.currentPage,
        PageSize: this.pagination.limit,
        OrderBy: 'Id desc',
        keyword: this.modelAgent.keyword
      }).then(res => {
        this.$set(this, 'rolesData', res.data);
        this.$set(this.pagination, 'total', res.head.totalCount);
        this.$set(this, 'rolesTableLoading', false);
      }).catch(() => {
        this.$set(this, 'rolesData', []);
        this.$set(this.pagination, 'total', 0);
        this.$set(this, 'rolesTableLoading', false);
      });
    },
    // 角色搜索
    searchFullNameClick() {
      this.pagination.currentPage = 1
      this.getRolesList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .roles {
    ::v-deep .elModelAgent {
      .el-input-group__append {
        background-color: #1890ff !important;
        color: #fff !important;
        border-color: #1890ff !important;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>

<style lang="scss">
  .el-dialog.agentRoles {
    max-width: 760px;
  }
</style>
